<template>
	<div class="home-wrap">
		<section class="hero">
			<h2><span>WJF</span> AI AGENTS</h2>
			<p>极客风 · 高性能 · 流式对话</p>
		</section>
		<section class="apps">
			<RouterLink class="app-card love" to="/love">
				<div class="title">💘 AI 恋爱大师</div>
				<div class="desc">情感沟通建议，多会话支持</div>
			</RouterLink>
			<RouterLink class="app-card manus" to="/manus">
				<div class="title">🧠 AI 超级智能体</div>
				<div class="desc">工具编排，步骤化执行</div>
			</RouterLink>
		</section>
	</div>
</template>

<script setup lang="ts">
import { useSeo } from '../composables/useSeo';
useSeo({ title: 'AI 应用集合 - 首页', description: '极客风流式 AI 应用集合：恋爱大师、超级智能体', keywords: 'AI, 聊天, SSE, 超级智能体, 恋爱大师' });
</script>

<style scoped>
.home-wrap { padding: 24px 16px; }
.hero { text-align: center; padding: 40px 0; }
.hero h2 { font-size: 42px; letter-spacing: 2px; margin: 0; font-weight: 900; }
.hero h2 span { color: #7aa2f7; }
.hero p { color: var(--dark-muted); margin-top: 8px; }
.apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 1000px; margin: 20px auto; }
.app-card { text-decoration: none; padding: 20px; border-radius: 14px; border: 1px solid var(--dark-border); background: linear-gradient(135deg, #0b1220, #0e1627); color: var(--dark-text); box-shadow: 0 10px 24px rgba(0,0,0,0.25); transition: transform .2s ease, box-shadow .2s ease; }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,0.35); }
.app-card .title { font-size: 20px; font-weight: 700; }
.app-card .desc { color: #9fb3c8; margin-top: 6px; }
.app-card.love { background: linear-gradient(135deg, #1a1c2d, #2a1832); }
.app-card.manus { background: linear-gradient(135deg, #101b2a, #14253b); }
@media (max-width: 800px) { .apps { grid-template-columns: 1fr; } .hero h2 { font-size: 32px; } }
</style>


